/**
 * @package admin_settings
 */

$(function(){
	 /**
     * @desc Form Fields Opener and actions
     */

    $(document).on('click', '.field-holder .field-adder', function(e) {
        var _id = $(this).data('id');
        var _name = $(this).data('ff_name');
        var _type = $(this).data('ff_type');
        var _fprefix = $(this).data('fprefix');
        var _key = $(this).data('key');

        var _params = '';
        var _value = '';

        var _html = '';

        if(_type == 'checkboxg' || _type == 'select' || _type == 'radio') {
            _params = $(this).data('ff_params');
        }

        var _remove = '<span class="ui-icon ui-icon-arrowthick-2-n-s sorter"></span><a href="#" class="field-deleter" data-id="' + _id + '" data-key="' + _key + '" data-fprefix="' + _fprefix + '"><span class="sprite-icons sprite-delete icon-holder"></span></a>';

        /*
         if (_type == 'text') {
         _html = '<li id="f-' + _id + '" class="bbottom">' + _remove + '<label
         class="narrow">' + _name + '</label><input type="text" name="cf[' + _id
         +
         ']" value="" /></li>';
         }

         if (_type == 'checkbox') {
         _html = '<li id="f-' + _id + '" class="bbottom">' + _remove + '<label
         class="narrow">' + _name + '</label><input type="checkbox" name="cf[' +
         _id + ']" value="1" /></li>';
         }

         if (_type == 'heading') {
         _html = '<li id="f-' + _id + '" class="bbottom ui-widget-header">' +
         _remove + _name + '</li>';
         }

         if (_type == 'textarea') {
         _html = '<li id="f-' + _id + '" class="bbottom">' + _remove + '<label
         class="narrow">' + _name + '</label><textarea name="cf[' + _id +
         ']"></textarea></li>';
         }

         if(_type == 'checkbox') {
         _html = '<li id="f-' + _id + '" class="bbottom">' + _remove + '<label
         class="narrow">' + _name + '</label><input type="checkbox" name="cf[' +
         _id + ']" value="1" /></li>';
         }

         if(_type == 'checkboxg' || _type == 'radio') {
         _html = '<li id="f-' + _id + '" class="bbottom">' + _remove + '<label
         class="narrow">' + _name + '</label>';
         _type = (_type == 'checkboxg') ? 'checkbox' : 'radio';
         var _tmp = _params.split(';');
         _html += '<div class="first">';

         for(var i = 0; i < _tmp.length; i++) {
         _html += '<br /><input type="'+_type+'" name="cf[' + _id + ']"
         value="1">' + _tmp[i];
         }
         _html += '</div></li>'
         }

         if(_type == 'select') {
         _html = '<li id="f-' + _id + '" class="bbottom">' + _remove + '<label
         class="narrow">' + _name + '</label>';
         var _tmp = _params.split(';');
         _html += '<div class="first"><select>';
         for(var i = 0; i < _tmp.length; i++) {
         _html += '<option>' + _tmp[i]+'</option>';
         }
         _html += '</select></div></li>'
         }
         */

        if(_type == 'heading') {
            _html = '<li id="' + _fprefix + '-' + _key + '-' + _id + '" class="bbottom ui-widget-header">' + _remove + '<label class="narrow">' + _name + ' (' + _type + ')</label></li>';
        } else {
            _html = '<li id="' + _fprefix + '-' + _key + '-' + _id + '" class="bbottom">' + _remove + '<label class="narrow">' + _name + ' (' + _type + ')</label></li>';
        }

        console.log("_fprefix %s", _fprefix + '-' + _key + '-' + _id);
        console.log("_id %s", _id);
        console.log("_name %s", _name);
        console.log("_type %s", _type);

        $('#' + _fprefix + '-' + _key + '-listing').append(_html);
        $('#holder-' + _fprefix + '-' + _key + '-' + _id).hide();
        $('#' + _fprefix + '-' + _key + '-listing').sortable('destroy');

        var _sortableoptions = {
            handle : '.sorter',
            placeholder : "ui-state-highlight",
            forcePlaceholderSize : true,
            containment : 'parent',
            tolerance : 'pointer',
            cursor : 'move'
        };
        var userAgent = navigator.userAgent.toLowerCase();
        if(userAgent.match(/firefox/)) {
            _sortableoptions["start"] = function(event, ui) {
                ui.item.css('margin-top', $(window).scrollTop());
            };
            _sortableoptions["beforeStop"] = function(event, ui) {
                ui.item.css('margin-top', 0);
            };
        }

        $('#' + _fprefix + '-' + _key + '-listing').sortable(_sortableoptions);

        e.preventDefault();

    });

    $(document).on('click', '.field-deleter', function(e) {

        var _id = $(this).data('id');
        var _fprefix = $(this).data('fprefix');
        var _key = $(this).data('key');

        $('#holder-' + _fprefix + '-' + _key + '-' + _id).show();
        $(this).closest('li').remove();
        $('#' + _fprefix + '-' + _key + '-listing').sortable('destroy');

        var _sortableoptions = {
            handle : '.sorter',
            placeholder : "ui-state-highlight",
            forcePlaceholderSize : true,
            containment : 'parent',

            tolerance : 'pointer',
            cursor : 'move'
        };

        var userAgent = navigator.userAgent.toLowerCase();
        if(userAgent.match(/firefox/)) {
            _sortableoptions["start"] = function(event, ui) {
                ui.item.css('margin-top', $(window).scrollTop());
            };
            _sortableoptions["beforeStop"] = function(event, ui) {
                ui.item.css('margin-top', 0);
            };
        }

        $('#' + _fprefix + '-' + _key + '-listing').sortable(_sortableoptions);

        e.preventDefault();

    });
});